<template>
  <div class="body-box">
    <!-- 第三行数据 -->
    <div class="content-box2">
      <div class="nine">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div style="width: 100%; height: 150px">
            <el-row :gutter="12" style="margin: 2% 0">
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">公厕总数</div>
                  <div class="hd">2103</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">维保人员总数</div>
                  <div class="hd">1056</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">总客流</div>
                  <div class="hd">1047</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">驻场人数</div>
                  <div class="hd">1047</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">流动保洁人数</div>
                  <div class="hd">1047</div>
                </el-card>
              </el-col>
            <!-- </el-row>
            <el-row :gutter="12" style="margin: 2% 0"> -->
              <!-- <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">总耗电量</div>
                  <div class="hd">15</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">总耗水量</div>
                  <div class="hd">6</div>
                </el-card>
              </el-col> -->
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">总报警数</div>
                  <div class="hd">1231</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">驻场当日出动</div>
                  <div class="hd">1047</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">流动保洁当日出动</div>
                  <div class="hd">1047</div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </dv-border-box-7>
      </div>
      <div class="one">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">昨日考勤打卡正点率 </span>
            </div>
          </div>

          <div id="WorkOnStandard_2" style="width: 98%; height: 150px"></div>
        </dv-border-box-7>
      </div>
      <div class="two">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">服务人数前三排行</span>
            </div>
          </div>
          <!-- <div
                  id="WorkRatioByCartype"
                  style="width: 98%; height: 150px"
                ></div> -->
          <div id="WorkOnStandard_1" style="width: 98%; height: 150px"></div>
        </dv-border-box-7>
      </div>
      <div class="three">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">空气质量前三排行</span>
            </div>
          </div>
          <el-table :data="tableData" border style="width: 430px; margin: 10px">
            <el-table-column prop="date" label="排名"> </el-table-column>
            <el-table-column prop="name" label="公厕" width="180">
            </el-table-column>
            <el-table-column prop="evaluate" label="空气质量">
            </el-table-column>
            <el-table-column prop="pm" label="PM值"> </el-table-column>
          </el-table>
        </dv-border-box-7>
      </div>
      <div class="four">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">昨日各区市民厕均投诉率</span>
            </div>
          </div>
          <el-table
            :data="tableData2"
            border
            style="width: 430px; margin: 10px"
          >
            <el-table-column prop="date" label="排名"> </el-table-column>
            <el-table-column prop="name" label="公厕" width="180">
            </el-table-column>
            <el-table-column prop="evaluate" label="空气质量">
            </el-table-column>
            <el-table-column prop="pm" label="PM值"> </el-table-column>
          </el-table>
        </dv-border-box-7>
      </div>
      <div class="five">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">服务人数前五排行</span>
            </div>
          </div>
          <!-- <div
                  id="WorkRatioByCartype"
                  style="width: 98%; height: 150px"
                ></div> -->
          <div id="WorkOnStandard_FIVE" style="width: 98%; height: 150px"></div>
        </dv-border-box-7>
      </div>
      <div class="seven">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">{{
                this.changeOperationName
              }}</span>
            </div>
          </div>

          <el-button-group style="position: absolute; right: 25%; z-index: 99">
            <el-button
              round
              type="primary"
              v-for="(item, index) in mapOperationsSummary"
              size="mini"
              :key="index"
              @click="changeOperationSummaryValue(index)"
              >{{ item.name }}
            </el-button>
          </el-button-group>
          <div
            :id="this.changeOperationValue"
            style="width: 98%; height: 300px"
          ></div>
        </dv-border-box-7>
      </div>
      <div class="eight">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">{{
                this.changeOperationName2
              }}</span>
            </div>
          </div>
          <el-button-group style="position: absolute; right: 31%; z-index: 99">
            <el-button
              round
              type="primary"
              v-for="(item, index) in mapOperationsSummary2"
              size="mini"
              :key="index"
              @click="changeOperationSummaryValue2(index)"
              >{{ item.name }}
            </el-button>
          </el-button-group>

          <div
            :id="this.changeOperationValue2"
            style="width: 98%; height: 300px"
          ></div>
        </dv-border-box-7>
      </div>
    </div>
  </div>
</template>

<script>
import { collectionRate } from '@/components/echart/bar.js'
import { collectionRate3 } from '@/components/echart/bar.js'
import { nolabelNolineBar } from '@/components/echart/bar.js'

// import { incomingQuantity } from '@/components/echart/bar.js'

import { noxlabelNolineBar } from '@/components/echart/bar.js'
import { spotsNumbe } from '@/components/echart/bar.js'
// import { spotsNumbeH1 } from '@/components/echart/bar.js'
import { spotsNumbe2 } from '@/components/echart/bar.js'
import { spotsNumbeH2 } from '@/components/echart/bar.js'
// import { brokenLine1 } from '@/components/echart/bar.js'
import drawMixin from "../utils/drawMixin";
import { formatTime } from '../utils/index.js'
import { formatDate } from '@/common/js/date.js'
import * as echarts from 'echarts';
export default {
  mixins: [drawMixin],
  data () {
    return {
      ClientNo: '00000',
      nowDate: formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24), 'yyyy-MM-dd'),
      radio1: '上海',
      changeOperationName: "昨日各区厕均保洁次数",
      changeOperationValue: "WorkOnStandard_71",
      mapOperationsSummary: [

        {
          name: "厕均保洁",
          icon: "el-icon-house",
        },
        {
          name: "出勤率",
          icon: "el-icon-house",
        },
        {
          name: "人均脱岗",
          icon: "el-icon-house",
        },
        {
          name: "服务总数",
          icon: "el-icon-house",
        },
        {
          name: "吸粪率",
          icon: "el-icon-house",
        },
      ],
      changeOperationName2: "各区厕均投诉量",
      changeOperationValue2: "WorkOnStandard_81",
      mapOperationsSummary2: [

        {
          name: "厕均投诉",
          icon: "el-icon-house",
        },
        {
          name: "厕均报警",
          icon: "el-icon-house",
        },
        {
          name: "厕均巡查",
          icon: "el-icon-house",
        }
        ,
        {
          name: "厕均客流",
          icon: "el-icon-house",
        }
      ],
      form: {
        userName: 'dlhw',
        date: '2020-10',
        clientNo: '00000',
        vehicleData: [{
          排队数: '0',
          车辆总数: '0',
          出动数: '0',
          出动率: '0',
        }],
      },
      MapV: {
        iconLayerDic: {},
        textLayerDic: {},
        dataSetDic: {},
        VIcon_Installations: {},
        VText_Installations: {},
      },
      Data: {
        arrayForType_Rubbish: [],
        arrayCLCPolygonData: [],
        arrayCLCMarkerData: [],
        arrayZZZMarkerData: [],
        arrayNCDMarkerData: [],
        arrayXQCYMarkerData: [],
        arrayCYMarkerData: [],
      },
      isZoomChange: 'S',
      map: null,
      mapZoom: 16,
      timing: null,
      loading: false,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      tableData: [{
        date: '1',
        name: '华明大道公厕',
        evaluate: '优秀',
        pm: '5'
      }, {
        date: '2',
        name: '第一菜市场公厕',
        evaluate: '优秀',
        pm: '8'
      }, {
        date: '3',
        name: '裕和路公厕',
        evaluate: '优秀',
        pm: '10'
      }],
      tableData2: [{
        date: '1',
        name: '华明大道公厕',
        evaluate: '优秀',
        pm: '5'
      }, {
        date: '2',
        name: '第一菜市场公厕',
        evaluate: '优秀',
        pm: '8'
      }, {
        date: '3',
        name: '裕和路公厕',
        evaluate: '优秀',
        pm: '10'
      }]
    }
  },
  components: {
    // centerLeft1,
    // centerLeft2,
    // centerRight1,
    // centerRight2,
    // center,
    // bottomLeft,
    // bottomRight
  },
  mounted () {
    // this.ClientNo = localStorage.getItem('ClientNo');
    this.initWorkOnStandard_1()
    this.initWorkOnStandard_2()
    this.initWorkOnStandard_71()
    this.initWorkOnStandard_72()
    this.initWorkOnStandard_73()
    this.initWorkOnStandard_74()
    this.initWorkOnStandard_81()
    this.initWorkOnStandard_82()
    this.initWorkOnStandard_83()
    this.initWorkerAttendance()
    this.initWorkerOnTime()
    this.initWorkerOnline()
    this.initWorkOnStandard_FIVE()
    // this.initWorkOnStandard_GC()
    // this.initWorkOnStandard_GZ()

    // this.initWorkOnStandard_LV()
    // this.initWorkOnStandard_ZV()
    this.initAccumulativeAttendance()
    this.timeFn()
  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {
    // 服务人数前五排行
    async initWorkOnStandard_1 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_1'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(noxlabelNolineBar());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose01?sqlName=dlhw&url=exec T_GetRubbishOnlineInfo '" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url);
      myChart.setOption({
        yAxis: {
          data: ["总蹲位", "男", "女", "无障碍"]
        },
        series: [{
          color: '#8B0000',
          name: '当前占用',
          data: ["134", "51", "60", "23"]
        }, {
          name: '当前空闲',
          color: '#2E8B57',
          data: ["701", "529", "480", "117"]
        }, {
          name: '故障',
          data: ["32", "10", "19", "3"]
        }]
      });
    },
    // 覆盖率
    async initWorkOnStandard_2 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_2'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate3());
      // myChart.setOption({
      //   yAxis: {
      //     max: 100
      //   },
      //   xAxis: {
      //     data: ["一级", "二级", "三级", "四级"]
      //   },
      //   series: [{
      //     // name:'完成率',
      //     data: ["98", "35", "44", "23"]
      //   },]
      // });
      myChart.setOption({
        // legend:{data:["小区","饭店","企业"]},
        series: [{
          data: [
            { "value": 723, "name": "一级" },
            { "value": 552, "name": "二级" },
            { "value": 152, "name": "三级" },
            { "value": 350, "name": "四级" },]
        },]
      });
    },
    // 服务人数前五排行
    async initWorkOnStandard_FIVE () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_FIVE'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbeH2());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose01?sqlName=dlhw&url=exec T_GetRubbishOnlineInfo '" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url);
      myChart.setOption({
        yAxis: {
          data: ["华明大道公厕", "新中村生态公厕", "棉三内公厕", "丽新路公厕", "杨台公厕"]
        },
        series: [{
          data: ["701", "529", "480", "314", "117"]
        }]
      });
    },
    // 实时车辆在线统计
    async initWorkerOnline () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkerOnline'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetVehicleOnlineInfo '" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)

      myChart.setOption({
        series: [{
          data: data
        },]
      });
    },
    // 实时车辆在线统计
    async initWorkerAttendance () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkerAttendance'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetRubbishOnlineInfo '" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url)

      myChart.setOption({
        series: [{
          // data: data
          data: [{ "value": 33.1, "name": "出勤人数：130人" }, { "value": 66.9, "name": "未出勤人数：261人" }],
        },]
      });
    },
    // 昨日车辆出动占比
    async initWorkerOnTime () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkerOnTime'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetRubbishDistanceInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url)

      myChart.setOption({
        series: [{
          // data: data.series
          // data: data
          data: [{ "value": 33.1, "name": "正点人数：130人" }, { "value": 66.9, "name": "不正点人数：261人" }],
        },]
      });
    },
    //累计出勤率
    async initAccumulativeAttendance () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('AccumulativeAttendance'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(nolabelNolineBar());
      // var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetVehicleWInfo?CLIENT_NO=00000";
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url)

      myChart.setOption({
        yAxis: {
          data: ['出勤率']
        },
        series: [{
          data: [100]
        }, {
          data: [37]
        }]
      });
    },
    // 各班组人员实时在线统计情况百分比
    async initWorkOnStandard_71 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(
        document.getElementById("WorkOnStandard_71")
      );
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url =
        "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerOnlineInfo '" +
        this.ClientNo +
        "'";
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);


      // data.filter((item) => {
      //   item.data != '0'
      //   return item
      //   })
      console.log(data)
      myChart.setOption({
        xAxis: {
          data: data.categories,
        },
        series: [
          {
            data: data.data,
          },
        ],
      });
    },
    //各班组考勤打卡正点情况百分比
    async initWorkOnStandard_72 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("WorkOnStandard_72"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url =
        "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerAttendenceRightAllInfo  '" +
        this.nowDate +
        "','" +
        this.ClientNo +
        "'";
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories,
        },
        series: [
          {
            data: data.data,
          },
        ],
      });
    },
    //各班组考勤打卡正常情况百分比
    async initWorkOnStandard_73 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(
        document.getElementById("WorkOnStandard_73")
      );
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url =
        "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerAttendenceRightInfo  '" +
        this.nowDate +
        "','" +
        this.ClientNo +
        "'";
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories,
        },
        series: [
          {
            data: data.data,
          },
        ],
      });
    },
    // 各班组人员人均报警统计情况百分比
    async initWorkOnStandard_74 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(
        document.getElementById("WorkOnStandard_74")
      );
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerAlarmInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{
          data: data.data
        }]
      });
    },
    // 各班组人员人均报警统计情况百分比
    async initWorkOnStandard_75 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(
        document.getElementById("WorkOnStandard_75")
      );
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerAlarmInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{
          data: data.data
        }]
      });
    },
    // 人员作业趟次
    async initWorkOnStandard_81 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_81'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT0BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerRoadCountInfoDetail  '" + this.nowDate + "','" + this.form.clientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{

          data: data.data
        }]
      });
    },
    // 人员作业趟次
    async initWorkOnStandard_82 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_82'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT0BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerRoadCountInfoDetail  '" + this.nowDate + "','" + this.form.clientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{

          data: data.data
        }]
      });
    },
    // 人员作业趟次
    async initWorkOnStandard_83 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_83'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT0BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerRoadCountInfoDetail  '" + this.nowDate + "','" + this.form.clientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{

          data: data.data
        }]
      });
    },
    changeOperationSummaryValue2 (index) {
      switch (index) {
        case 0:
          {
            this.changeOperationValue2 = "WorkOnStandard_81";
          }
          break;
        case 1:
          {
            this.changeOperationValue2 = "WorkOnStandard_82";
          }
          break;
        case 2:
          {
            this.changeOperationValue2 = "WorkOnStandard_83";
          }
          break;
      }
      setTimeout(() => {
        this.changeOperationSummary2(index);
      }, 50);
    },
    changeOperationSummary2 (index) {
      switch (index) {
        case 0:
          {
            this.initWorkOnStandard_81();
            this.changeOperationName2 = "各区厕均投诉量";
          }
          break;

        case 1:
          {
            this.initWorkOnStandard_82();
            this.changeOperationName2 = "各区厕均报警数";
          }
          break;
        case 2:
          {
            this.initWorkOnStandard_83();
            this.changeOperationName2 = "各区厕均巡查问题数";
          }
          break;
        case 3:
          {
            this.initWorkOnStandard_84();
            this.changeOperationName2 = "各区厕均客流量";
          }
          break;
      }
    },
    changeOperationSummaryValue (index) {
      switch (index) {
        case 0:
          {
            this.changeOperationValue = "WorkOnStandard_71";
          }
          break;
        case 1:
          {
            this.changeOperationValue = "WorkOnStandard_72";
          }
          break;
        case 2:
          {
            this.changeOperationValue = "WorkOnStandard_73";
          }
          break;
        case 3:
          {
            this.changeOperationValue = "WorkOnStandard_74";
          }
          break;
      }
      setTimeout(() => {
        this.changeOperationSummary(index);
      }, 50);
    },
    changeOperationSummary (index) {
      switch (index) {
        case 0:
          {
            this.initWorkOnStandard_71();
            this.changeOperationName = "昨日各区厕均保洁次数";
          }
          break;

        case 1:
          {
            this.initWorkOnStandard_72();
            this.changeOperationName = "昨日各区出勤率";
          }
          break;
        case 2:
          {
            this.initWorkOnStandard_73();
            this.changeOperationName = "昨日各区人均脱岗报警率";
          }
          break;
        case 3:
          {
            this.initWorkOnStandard_74();
            this.changeOperationName = "昨日各区服务总人数";
          }
          break;
        case 4:
          {
            this.initWorkOnStandard_75();
            this.changeOperationName = "本月各区公厕吸粪率";
          }
          break;
      }
    },
    timeFn () {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading () {
      setTimeout(() => {
        this.loading = false
        this.initC();
      }, 2000)
    },
  }
}
</script>

<style lang="scss">
@import '../assets/scss/index.scss';
//下方区域的布局
.content-box2 {
  grid-auto-flow: row dense;
  display: grid;
  // grid-template-columns: repeat(4, 25%);
  grid-template-columns: 25% 75%;
  grid-template-rows: 20% 20% 20% 20% 20%;
  grid-template-areas:
   
    'one nine'
    'two seven'
    'five seven'
    'three eight'
    'four eight';
}
.one {
  margin: 5px;
  grid-area: one;
  background: rgba(8, 48, 74, 0.5);
}

.two {
  margin: 5px;
  grid-area: two;
  background: rgba(8, 48, 74, 0.5);
  // grid-row-start: span 2;
}
.three {
  margin: 5px;
  grid-area: three;
  background: rgba(8, 48, 74, 0.5);
}
.four {
  margin: 5px;
  grid-area: four;
  background: rgba(8, 48, 74, 0.5);
}
.five {
  margin: 5px;
  grid-area: five;
  background: rgba(8, 48, 74, 0.5);
}
.six {
  margin: 5px;
  grid-area: six;
  background: rgba(8, 48, 74, 0.5);
}
.seven {
  margin: 5px;
  grid-area: seven;
  background: rgba(8, 48, 74, 0.5);
}
.eight {
  margin: 5px;
  grid-area: eight;
  background: rgba(8, 48, 74, 0.5);
}
.nine {
  margin: 5px;
  grid-area: nine;
  background: rgba(8, 48, 74, 0.5);
}
.ten {
  margin: 5px;
  grid-area: ten;
  background: rgba(8, 48, 74, 0.5);
}
.eleven {
  margin: 5px;
  grid-area: eleven;
  background: rgba(8, 48, 74, 0.5);
}
.twelve {
  margin: 5px;
  grid-area: twelve;
  background: rgba(8, 48, 74, 0.5);
}
.thirteen {
  margin: 5px;
  grid-area: thirteen;
  background: rgba(8, 48, 74, 0.5);
}
.fourteen {
  margin: 5px;
  grid-area: fourteen;
  background: rgba(8, 48, 74, 0.5);
}
// 底部数据
.bototm-box {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 50%);
}
.title {
  padding-top: 10px;
  padding-left: 20px;
  .text {
    font-size: 15px;
    color: #fff;
  }
}
.title-text {
  font-family: 'SimHei';
  font-weight: bold;
}
</style>

